<style lang="less">
.equip-room {
  height: 700px;
  overflow-y: auto;
}

.frame-container {
  float: left;
  width: 245px;
  margin: 15px;
  border: 4px solid #9999ff;
  background-color: #f4f7ff;
  .frame-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding: 5px;
  }
  .device-container {
    width: 100%;
    height: 20px;
  }
  .hasDevice {
    width: 100%;
    height: 60px;
    background: url(./../../../static/hasDevice.png) no-repeat;
  }
  .noDevice {
    width: 100%;
    height: 100px;
    background: url(./../../../static/noDevice.png) no-repeat;
  }
}
</style>
<template>
  <div>
    <div class="equip-room" v-if="room.length>0">
      <div v-for="(item,index) in room" class="frame-container" :value="index" :key="index">
        <div class="frame-title">{{item.frameName}}</div>
        <div
          v-for="(child,indexChild) in item.children"
          :class="child.hasDevice?'hasDevice':'noDevice'"
          :value="indexChild"
          :key="indexChild"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFrameInfo, getFrameDevices } from "@/api/device";

import util from "@/libs/util.js";

export default {
  name: "frame",
  components: {},
  props: {
    equipmentRoomId: {
      type: Number,
      default: function() {
        return 0;
      }
    }
  },

  data() {
    return {
      frameForm: {
        frameId: "",
        frameName: "",
        layer: "",
        detail: "",
        height: "",
        row: "",
        lat: "",
        lng: "",
        col: "",
        supplier: "",
        remark: ""
      },
      room: []
    };
  },
  methods: {
    getAllFrameInfo() {
      getFrameDevices({ equipmentroomId: this.equipmentRoomId }).then(
        res => {
          if (res.code == 0) {
            if (res.data.length > 0) {
              this.room = res.data.map(v => {
                let children = new Array(v.layer);
                for (let i = 0; i < v.layer; i++) {
                  children[i] = { hasDevice: false };
                }

                v.children.forEach(child => {
                  children[child.layerRow - 1].hasDevice = true;
                });
                return { frameName: v.frameName, children: children };
              });
            }
          }
        },
        error => {
          console.log("submit error", JSON.stringify(error));
        }
      );
    }
  },
  mounted() {
    this.getAllFrameInfo();
  }
};
</script>
